//获取canvas上下文
const ctx = document.getElementById('canvas').getContext('2d');

const img = new Image();
img.src =
  'https://img2.baidu.com/it/u=1693444096,1337223104&fm=253&fmt=auto&app=138&f=JPEG?w=684&h=771';

img.onload = () => {
  // 直接将图片绘制到canvas上，指定目标宽度和高度为canvas的尺寸
  /* 
    在这里尽管 canvas 没有显式存储在一个变量中，但 ctx 对象内部已经包含了对 canvas 元素的引用，
    因此可以直接使用 canvas.width 和 canvas.height。
    drawImage() 方法的参数:
      第一个参数是图片的引用，
      第二个参数是图片左上角在目标 canvas 上的 x 坐标，第三个参数是图片左上角在目标 canvas 上的 y 坐标，
      第四个参数是图片在目标 canvas 上的宽度，最后一个参数是图片在目标 canvas 上的高度。
  */
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
